<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>页面导航 - 家庭药品管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #E8EAF6 0%, #F3E5F5 50%, #FCE4EC 100%);
            min-height: 100vh;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .page-card {
            transition: all 0.3s;
        }

        .page-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        .float-badge {
            animation: float 2s ease-in-out infinite;
        }

        /* 手机状态栏占位 */
        .status-bar-spacer {
            height: 28px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            position: relative;
            z-index: 999;
        }
    </style>
</head>

<body>
    <!-- 手机状态栏占位 -->
    <div class="status-bar-spacer"></div>

    <div class="min-h-screen pb-6">
        <!-- 顶部头部 -->
        <div class="glass-card px-5 py-6 mb-6">
            <div class="flex items-center gap-4 mb-4">
                <div
                    class="w-14 h-14 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center shadow-lg">
                    <span class="text-3xl">💊</span>
                </div>
                <div class="flex-1">
                    <h1 class="text-xl font-bold text-gray-900">家庭药品管理系统</h1>
                    <p class="text-xs text-gray-500">马卡龙配色设计 · 页面导航</p>
                </div>
            </div>

            <div class="bg-gradient-to-br from-pink-50 to-purple-50 rounded-2xl p-4 border-2 border-pink-100">
                <div class="flex items-start gap-3">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl flex items-center justify-center flex-shrink-0 shadow-md">
                        <i class="fas fa-info-circle text-white text-sm"></i>
                    </div>
                    <div class="flex-1 text-sm text-gray-700">
                        <p class="font-semibold mb-1">🎨 设计风格说明</p>
                        <p class="text-xs leading-relaxed">采用柔和的马卡龙配色方案，大圆角卡片设计，可爱的图标和emoji，为家庭用户提供温馨友好的使用体验。</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="px-5">
            <!-- 核心页面 -->
            <section class="mb-6">
                <div class="flex items-center gap-2 mb-4">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-star text-white text-sm"></i>
                    </div>
                    <h2 class="text-lg font-bold text-gray-900">核心页面</h2>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <a href="index.html" class="page-card glass-card rounded-3xl p-5 shadow-lg">
                        <div
                            class="w-14 h-14 mx-auto mb-3 bg-gradient-to-br from-purple-400 to-pink-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-home text-white text-2xl"></i>
                        </div>
                        <div class="text-center">
                            <div class="font-bold text-gray-900 mb-1">首页</div>
                            <div class="text-xs text-gray-500">系统主页面</div>
                        </div>
                    </a>

                    <a href="medicine_management.html" class="page-card glass-card rounded-3xl p-5 shadow-lg">
                        <div
                            class="w-14 h-14 mx-auto mb-3 bg-gradient-to-br from-green-400 to-emerald-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-pills text-white text-2xl"></i>
                        </div>
                        <div class="text-center">
                            <div class="font-bold text-gray-900 mb-1">药品管理</div>
                            <div class="text-xs text-gray-500">管理所有药品</div>
                        </div>
                    </a>

                    <a href="add_medicine.html" class="page-card glass-card rounded-3xl p-5 shadow-lg">
                        <div
                            class="w-14 h-14 mx-auto mb-3 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-plus-circle text-white text-2xl"></i>
                        </div>
                        <div class="text-center">
                            <div class="font-bold text-gray-900 mb-1">添加药品</div>
                            <div class="text-xs text-gray-500">新增药品记录</div>
                        </div>
                    </a>

                    <a href="reminder.html" class="page-card glass-card rounded-3xl p-5 shadow-lg">
                        <div
                            class="w-14 h-14 mx-auto mb-3 bg-gradient-to-br from-orange-400 to-amber-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-bell text-white text-2xl"></i>
                        </div>
                        <div class="text-center">
                            <div class="font-bold text-gray-900 mb-1">用药提醒</div>
                            <div class="text-xs text-gray-500">管理服药提醒</div>
                        </div>
                    </a>
                </div>
            </section>

            <!-- 用户与家庭 -->
            <section class="mb-6">
                <div class="flex items-center gap-2 mb-4">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-users text-white text-sm"></i>
                    </div>
                    <h2 class="text-lg font-bold text-gray-900">用户与家庭</h2>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <a href="profile.html" class="page-card glass-card rounded-3xl p-5 shadow-lg">
                        <div
                            class="w-14 h-14 mx-auto mb-3 bg-gradient-to-br from-purple-400 to-pink-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-user text-white text-2xl"></i>
                        </div>
                        <div class="text-center">
                            <div class="font-bold text-gray-900 mb-1">个人中心</div>
                            <div class="text-xs text-gray-500">账户与设置</div>
                        </div>
                    </a>

                    <a href="family.html" class="page-card glass-card rounded-3xl p-5 shadow-lg">
                        <div
                            class="w-14 h-14 mx-auto mb-3 bg-gradient-to-br from-pink-400 to-rose-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-users text-white text-2xl"></i>
                        </div>
                        <div class="text-center">
                            <div class="font-bold text-gray-900 mb-1">家庭成员</div>
                            <div class="text-xs text-gray-500">管理家庭成员</div>
                        </div>
                    </a>
                </div>
            </section>

            <!-- 辅助页面 -->
            <section class="mb-6">
                <div class="flex items-center gap-2 mb-4">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-th-large text-white text-sm"></i>
                    </div>
                    <h2 class="text-lg font-bold text-gray-900">辅助页面</h2>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <a href="settings.html" class="page-card glass-card rounded-3xl p-5 shadow-lg">
                        <div
                            class="w-14 h-14 mx-auto mb-3 bg-gradient-to-br from-teal-400 to-cyan-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-cog text-white text-2xl"></i>
                        </div>
                        <div class="text-center">
                            <div class="font-bold text-gray-900 mb-1">系统设置</div>
                            <div class="text-xs text-gray-500">应用配置</div>
                        </div>
                    </a>

                    <a href="help_center.html" class="page-card glass-card rounded-3xl p-5 shadow-lg">
                        <div
                            class="w-14 h-14 mx-auto mb-3 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-question-circle text-white text-2xl"></i>
                        </div>
                        <div class="text-center">
                            <div class="font-bold text-gray-900 mb-1">帮助中心</div>
                            <div class="text-xs text-gray-500">使用帮助</div>
                        </div>
                    </a>

                    <a href="backup_restore.html" class="page-card glass-card rounded-3xl p-5 shadow-lg relative">
                        <div
                            class="w-14 h-14 mx-auto mb-3 bg-gradient-to-br from-blue-400 to-sky-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-cloud-upload-alt text-white text-2xl"></i>
                        </div>
                        <div class="text-center">
                            <div class="font-bold text-gray-900 mb-1">备份恢复</div>
                            <div class="text-xs text-gray-500">数据备份</div>
                        </div>
                        <span class="absolute top-3 right-3 w-3 h-3 bg-red-500 rounded-full float-badge"></span>
                    </a>

                    <a href="medicine_detail.html" class="page-card glass-card rounded-3xl p-5 shadow-lg">
                        <div
                            class="w-14 h-14 mx-auto mb-3 bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-info-circle text-white text-2xl"></i>
                        </div>
                        <div class="text-center">
                            <div class="font-bold text-gray-900 mb-1">药品详情</div>
                            <div class="text-xs text-gray-500">详细信息</div>
                        </div>
                    </a>

                    <a href="search_result.html" class="page-card glass-card rounded-3xl p-5 shadow-lg">
                        <div
                            class="w-14 h-14 mx-auto mb-3 bg-gradient-to-br from-pink-400 to-rose-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-search text-white text-2xl"></i>
                        </div>
                        <div class="text-center">
                            <div class="font-bold text-gray-900 mb-1">搜索结果</div>
                            <div class="text-xs text-gray-500">查找药品</div>
                        </div>
                    </a>

                    <a href="add_reminder.html" class="page-card glass-card rounded-3xl p-5 shadow-lg">
                        <div
                            class="w-14 h-14 mx-auto mb-3 bg-gradient-to-br from-yellow-400 to-amber-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-bell-plus text-white text-2xl"></i>
                        </div>
                        <div class="text-center">
                            <div class="font-bold text-gray-900 mb-1">添加提醒</div>
                            <div class="text-xs text-gray-500">新增提醒</div>
                        </div>
                    </a>
                </div>
            </section>

            <!-- 组件演示 -->
            <section class="mb-6">
                <div class="flex items-center gap-2 mb-4">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-pink-500 to-rose-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-palette text-white text-sm"></i>
                    </div>
                    <h2 class="text-lg font-bold text-gray-900">设计系统</h2>
                </div>

                <a href="ui_demo.html" class="page-card glass-card rounded-3xl p-6 shadow-lg block">
                    <div class="flex items-center gap-4">
                        <div
                            class="w-16 h-16 bg-gradient-to-br from-purple-500 via-pink-500 to-rose-500 rounded-3xl flex items-center justify-center shadow-xl">
                            <i class="fas fa-layer-group text-white text-3xl"></i>
                        </div>
                        <div class="flex-1">
                            <div class="font-bold text-gray-900 text-lg mb-1">UI组件展示</div>
                            <div class="text-xs text-gray-500">查看完整的设计系统和UI组件库</div>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400 text-xl"></i>
                    </div>
                </a>
            </section>

            <!-- 设计特点 -->
            <section class="mb-6">
                <div class="flex items-center gap-2 mb-4">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-sparkles text-white text-sm"></i>
                    </div>
                    <h2 class="text-lg font-bold text-gray-900">设计特点</h2>
                </div>

                <div class="glass-card rounded-3xl p-5 shadow-lg space-y-3">
                    <div class="flex items-start gap-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-green-100 to-emerald-100 rounded-xl flex items-center justify-center flex-shrink-0">
                            <span class="text-xl">🎨</span>
                        </div>
                        <div class="flex-1">
                            <div class="font-semibold text-gray-900 text-sm mb-1">马卡龙配色</div>
                            <div class="text-xs text-gray-600">柔和舒适的浅色系，包括浅绿、浅橙、浅紫、粉色等</div>
                        </div>
                    </div>

                    <div class="flex items-start gap-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-xl flex items-center justify-center flex-shrink-0">
                            <span class="text-xl">🔄</span>
                        </div>
                        <div class="flex-1">
                            <div class="font-semibold text-gray-900 text-sm mb-1">大圆角设计</div>
                            <div class="text-xs text-gray-600">20-24px的圆角半径，营造柔和友好的视觉体验</div>
                        </div>
                    </div>

                    <div class="flex items-start gap-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-purple-100 to-pink-100 rounded-xl flex items-center justify-center flex-shrink-0">
                            <span class="text-xl">✨</span>
                        </div>
                        <div class="flex-1">
                            <div class="font-semibold text-gray-900 text-sm mb-1">玻璃拟态</div>
                            <div class="text-xs text-gray-600">毛玻璃效果和柔和阴影，增强层次感和现代感</div>
                        </div>
                    </div>

                    <div class="flex items-start gap-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-orange-100 to-amber-100 rounded-xl flex items-center justify-center flex-shrink-0">
                            <span class="text-xl">😊</span>
                        </div>
                        <div class="flex-1">
                            <div class="font-semibold text-gray-900 text-sm mb-1">可爱图标</div>
                            <div class="text-xs text-gray-600">使用emoji和渐变图标，增添亲和力和趣味性</div>
                        </div>
                    </div>

                    <div class="flex items-start gap-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-pink-100 to-rose-100 rounded-xl flex items-center justify-center flex-shrink-0">
                            <span class="text-xl">💫</span>
                        </div>
                        <div class="flex-1">
                            <div class="font-semibold text-gray-900 text-sm mb-1">微动效</div>
                            <div class="text-xs text-gray-600">点击缩放、悬浮提升等细微交互，提升用户体验</div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 版本信息 -->
            <div class="glass-card rounded-3xl p-5 shadow-lg text-center">
                <div class="text-sm text-gray-500 mb-2">家庭药品管理系统</div>
                <div class="text-xs text-gray-400">v2.0.0 · 马卡龙配色版</div>
                <div class="text-xs text-gray-400 mt-2">设计参考：现代化学习管理系统UI</div>
            </div>
        </div>
    </div>
</body>

</html>